<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/2/27
  Time: 19:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>专辑音频管理模块</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" type="text/javascript"></script>
</head>
<body>
    <!--添加专辑表单-->
    <form class="layui-form" id="addAlbumForm" lay-filter="addAlbumFormFilter" style="display: none;padding: 15px 15px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">专辑名称</label>
            <div class="layui-input-block">
                <input type="hidden" name="albumImage"/>
                <input type="text" name="albumName" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专辑封面</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="addAlbumImg">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专辑作者</label>
            <div class="layui-inline">
                <input type="text" name="albumAuthor" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">播音员</label>
            <div class="layui-inline">
                <input type="text" name="albumTeller" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专辑集数</label>
            <div class="layui-inline">
                <input type="text" name="albumEpisodes" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专辑星级</label>
            <div class="layui-inline">
                <input type="text" name="albumStar" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传时间</label>
            <div class="layui-inline">
                <input type="text" name="albumDate" class="layui-input" id="addAlbumDate">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">专辑简介</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="albumContent" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addAlbumFilter">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!--添加音频表单-->
    <form class="layui-form" id="addAudioForm" lay-filter="addAudioFormFilter" style="display: none;padding: 15px 15px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">音频名称</label>
            <div class="layui-input-block">
                <input type="hidden" name="audioUrl"/>
                <input type="text" name="audioName" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">音频封面图</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="addAudioImg">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属专辑</label>
            <div class="layui-input-block">
                <select name="albumId" id="album1" lay-filter="albumFilter1">
                    <option>--选择专辑--</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">音频大小</label>
            <div class="layui-inline">
                <input type="text" name="audioSize" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">排序字段</label>
            <div class="layui-inline">
                <input type="text" name="audioOrder" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addAudioFilter">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!--添加按钮-->
    <button class="layui-btn" id="addAlbum">添加专辑</button>
    <button class="layui-btn" id="addAudio">添加音频</button>
    <!--展示表格-->
    <table id="myTable" lay-filter="tableFilter"></table>
    <!--表格显示图片-->
    <script type="text/html" id="showImg">
        <img src="${pageContext.request.contextPath}/album/{{d.albumImage}}" height="50px" width="100px"/>
    </script>
    <!--toolbar组件-->
    <script type="text/html" id="bar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-danger" lay-event="delete">删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
            <button class="layui-btn layui-btn-sm" lay-event="audio">详细</button>
        </div>
    </script>
    <!--修改表单-->
    <form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 15px 15px 5px 5px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">专辑名称</label>
            <div class="layui-input-block">
                <input type="hidden" name="albumId"/>
                <input type="hidden" name="albumImage"/>
                <input type="text" name="albumName" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专辑封面</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="updateAlbumImg">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专辑作者</label>
            <div class="layui-inline">
                <input type="text" name="albumAuthor" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">播音员</label>
            <div class="layui-inline">
                <input type="text" name="albumTeller" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专辑集数</label>
            <div class="layui-inline">
                <input type="text" name="albumEpisodes" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专辑星级</label>
            <div class="layui-inline">
                <input type="text" name="albumStar" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传时间</label>
            <div class="layui-inline">
                <input type="text" name="albumDate" class="layui-input" id="updateAlbumDate">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">专辑简介</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="albumContent" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updateFilter">修改</button>
            </div>
        </div>
    </form>
<!--layui代码-->
    <script>
        layui.use(['table','form','laydate','upload','layer'],function () {
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;
            var upload = layui.upload;
            var layer = layui.layer;
            var $ = layui.$;

            //1、渲染表格  展示专辑信息
            table.render({
                elem:'#myTable',
                url:'${pageContext.request.contextPath}/cmfzAlbum/show',
                page:true,
                limit:3,
                limits:[3,4,5],
                cols:[[
                    {field:'albumId',title:'编号',sort:true,width:120},
                    {field:'albumName',title:'专辑名称',sort:true,width:120},
                    {field:'albumAuthor',title:'作者',sort:true,width:120},
                    {field:'albumTeller',title:'播音员',sort:true,width:120},
                    {field:'albumImage',title:'封面图',templet:'#showImg'},
                    {field:'albumEpisodes',title:'集数',sort:true,width:120},
                    {field:'albumDate',title:'上传日期',sort:true,width:120},
                    {field:'albumStar',title:'星级',sort:true,width:120},
                    {field:'albumContent',title:'简介',sort:true,width:120},
                    {title:'操作',toolbar:'#bar'}
                ]]
            })
            //2、添加操作
            //2、1添加专辑信息
            $('#addAlbum').click(function () {
                layer.open({
                    type:1,
                    title:'添加专辑',
                    area:'900px',
                    content:$('#addAlbumForm')
                })
                //2.1.1加载日期组件
                laydate.render({
                    elem:'#addAlbumDate'
                })
            })
            //2.1.2加载上传图片组件
            upload.render({
                elem:'#addAlbumImg',
                url:'${pageContext.request.contextPath}/cmfzAlbum/upload',
                done:function (result) {
                    if(result.flag){
                        layer.msg('上传图片成功');
                        form.val('addAlbumFormFilter',{
                            albumImage:result.fileName
                        })
                    }else{
                        layer.msg('上传图片失败')
                    }
                }
            })
            //2.1.3提交添加专辑表单
            form.on('submit(addAlbumFilter)',function () {
                $.ajax({
                    url:'${pageContext.request.contextPath}/cmfzAlbum/add',
                    data:$('#addAlbumForm').serialize(),
                    success:function (result) {
                        if(result.flag){
                            layer.msg('添加成功');
                            layer.closeAll();
                            $('#addAlbumForm')[0].reset();
                            table.reload('myTable');
                        }else {
                            layer.msg('添加失败');
                        }
                    }
                })
                return false;
            })
            //2.2 添加音频信息
            $('#addAudio').click(function () {
                layer.open({
                    type:1,
                    title:'添加音频',
                    area:'900px',
                    content:$('#addAudioForm')
                })
                //2.2.1加载音频所属专辑的下拉框
                $.ajax({
                    url:'${pageContext.request.contextPath}/cmfzAlbum/selectAllCmfzAlbum',
                    success:function (result) {
                        var s = '';
                        //遍历查询出的专辑集合  将每一个专辑逐次添加下拉框内 记得刷新下拉框
                        $(result).each(function (i, obj) {
                            s += '<option value="'+obj.albumId+'">'+obj.albumName+'</option>';
                            $('#album1').html(s);
                            //刷新下拉框  因为下拉框数据是动态更新的
                            form.render('select');
                        })
                    }
                })
            })
            //2.2.2加载上传音频图片组件
            upload.render({
                elem:'#addAudioImg',
                url:'${pageContext.request.contextPath}/cmfzAudio/upload',
                done:function (result) {
                    if(result.flag){
                        layer.msg('上传图片成功');
                        form.val('addAlbumFormFilter',{
                            audioUrl:result.fileName
                        })
                    }else{
                        layer.msg('上传图片失败')
                    }
                }
            })
            //2.2.3 提交添加音频表单
            form.on('submit(addAudioFilter)',function () {
                $.ajax({
                    url:'${pageContext.request.contextPath}/cmfzAudio/add',
                    data:$('#addAudioForm').serialize(),
                    success:function (result) {
                        if(result.flag){
                            layer.msg('添加成功');
                            layer.closeAll();
                            $('#addAudioForm')[0].reset();
                            //table.reload('myTable');  音频展示表格不在此页面
                        }else {
                            layer.msg('添加失败');
                        }
                    }
                })
                return false;
            })
            //3.监听toolbar工具栏组件  执行删除和修改操作
            table.on('tool(tableFilter)',function (obj) {
                if(obj.event=='delete'){
                    layer.confirm('确认要删除该项吗？',function (index) {
                        $.ajax({
                            url:'${pageContext.request.contextPath}/cmfzAlbum/remove',
                            data:'albumId='+obj.data.albumId,
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('删除成功');
                                    table.reload('myTable');
                                }else {
                                    layer.msg('删除失败');
                                }
                            }
                        })
                        layer.close(index);
                    })
                }else if(obj.event=='update'){
                    layer.open({
                        type:1,
                        title:'修改专辑',
                        area:'900px',
                        content:$('#updateForm')
                    })
                    //加载日期组件
                    laydate.render({
                        elem:'#updateAlbumDate'
                    })
                    //回显
                    $.ajax({
                        url:'${pageContext.request.contextPath}/cmfzAlbum/getOne',
                        data:'albumId='+obj.data.albumId,
                        success:function (result) {
                            form.val('updateFormFilter',{
                                albumId:result.albumId,
                                albumName:result.albumName,
                                albumAuthor:result.albumAuthor,
                                albumTeller:result.albumTeller,
                                albumEpisodes:result.albumEpisodes,
                                albumDate:result.albumDate,
                                albumContent:result.albumContent,
                                albumImage:result.albumImage,
                                albumStar:result.albumStar
                            })
                        }

                    })
                    //加载图片上传组件
                    upload.render({
                        elem:'#updateAlbumImg',
                        url:'${pageContext.request.contextPath}/cmfzAlbum/upload',
                        done:function (result) {
                            if(result.flag){
                                layer.msg('上传图片成功');
                                form.val('updateFormFilter',{
                                    albumImage:result.fileName
                                })
                            }else{
                                layer.msg('上传图片失败')
                            }
                        }
                    })
                    //提交修改专辑表单
                    form.on('submit(updateFilter)',function () {
                        $.ajax({
                            url:'${pageContext.request.contextPath}/cmfzAlbum/update',
                            data:$('#updateForm').serialize(),
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('修改成功');
                                    layer.closeAll();
                                    table.reload('myTable');
                                }else {
                                    layer.msg('修改失败');
                                }
                            }
                        })
                        return false;
                    })

                }else if(obj.event=='audio'){
                    location.href='${pageContext.request.contextPath}/jsp/cmfz_audio.jsp?albumId='+obj.data.albumId;
                }
            })


        })
    </script>
</body>
</html>
